Text layout properties affect the position of text on a page. These are properties specific to text, such as line-height and letter-spacing. Layout is also affected by the layout properties below.
While text appearance controls in HTML are very limited, CSS provides control over traditional typographic elements such as letter spacing (kern), word spacing (track) and line spacing (leading).
The text layout properties are:
CSS2 provides two new properties for controlling the direction of text, direction, and unicode-bidi
The letter-spacing property gives you control over the space between characters, what in traditional typography is known as kern.
letter-spacing can be specified in any length unit. Length units are discussed in our section on values. For tighter kern, negative letter-spacing can be specified.
In addition, the keyword value normal can be used to specify a letter-spacing.
By default text has a letter-spacing of normal.
Elements have the same letter-spacing as their parent element. The letter-spacing value of normal overrides an inherited value.
With a letter-spacing of normal, browsers may adjust letter-spacing values to correctly justify text. With an explicit letter-spacing value, browsers will not adjust letter-spacing.
A relative letter-spacing value, like em or ex, rather than an absolute value ensures that the look of the text is more or less the same regardless of the actual font and size in fact used by the browser to draw the text. For more, see our section on length values.
Traditionally in typography, control over the space between words, what is known as track, has been an important element in page design. Loose tracking tends to cause pages to river, reducing legibility. Rivering is the phenomenon of white space forming vertical columns down a page. This tends to draw the reader's eye down the page, rather than across it. Tight tacking, on the other hand impairs legibility as readers strain to make out words as a whole. We tend to read words as units in themselves, rather than as strings of characters. Tight tracking makes it more difficult to do this.
word-spacing gives control over the track of text.
word-spacing can be specified in any length unit. Length units are discussed in our section on values. For tighter track, negative word-spacing can be specified.
addition, word-spacing can be specified as normal.
word-spacing by default is normal.
The word-spacing of an element is the same as that of its parent element. Setting the word-spacing of an element to normal overrides any inherited word-spacing.
As with letter-spacing, relative rather than absolute word-spacing is recommended. For more, see our section on length values.
The line-height property sets the distance between adjacent lines. Strictly, the distance is between the baselines of the adjacent lines. The baseline is the imaginary horizontal line on which characters such as A, B and so on sit. Letters such as y descend below the baseline, to the descent line.
In traditional typography, the space between lines is referred to as leading (pronounced like the metal). The line-height property gives you control over leading.
If you are interested, it's pronounced leading, because lead was traditionally used in rows to separate lines of text. The typesetter would lead the text. Glad you asked?
line-height can be specified in a number of ways, by multiples, percentages, length units or using the keyword normal.
Multiples
The line-height can be specified as a multiple of the size of the font of the element. For example, with a font-size of 10pt, and a line height of 1.2, the space between the baseline of adjacent lines will be 1.2x10=12pt.
Percentages
Our section on percentages discusses percentage values in detail.
When a line-height is specified as a percentage value, a similar multiplication occurs. The factor of 1.2 we saw in multiples above translates as a percentage of 120%.
With a font size of 12pt, and a line-height of 200%, the resultant line height (space between baselines) is 12x2=24pt.
Lengths
Our section on values discusses length values in detail.
Rather than setting a multiple of the current font-size, length values specify a value for the line-height. This value can be a relative value such as em or ex, or an absolute value such as mm or cm.
See the section on length values for more on the use of relative and absolute length.
Normal
In addition, the line-height can be specified as normal. This overrides otherwise inherited values.
If no line-height value is specified or inherited, the line-height of an element is normal.
The line-height of an element is inherited from the element which contains it. There are however a couple of complicating factors to keep in mind. The following is entering the realm of trainspotters, so feel free to ignore it.
If a line-height is specified as a multiple, then a child element inherits the factor, not the resultant value. In our example above, we saw that a font-size of 10pt, with a line-height of 1.2 results in a distance of 12pts between the baseline of adjacent lines. Now, a child element would inherit a line-height multiple of 1.2, rather than a line-height value of 12pts. So, if a child element had an 8pt font size, the resultant line-height of that element would be 1.2x8=9pt, not the 12pt line height of the parent element.
On the other hand, if the line-height of an element is specified as a percentage or a length value, any child element inherits the value, not the multiple.
As with other properties which can take relative and absolute values, take a look at our discussion of length values in the section of values for suggestions about when each type is appropriate.
Elements often appear on the same line, or lined up horizontally across a page. The vertical align-property gives control over how elements align vertically across the page.
vertical-align can be specified either by one of a set of keywords, or by percentage values.
Keywords
vertical-alignment can be specified using one of a set of keywords. These keywords work in one of two distinct ways. One group of keywords works relative to the parent element, while the other works relative to the line on which an element appears. In many cases this is essentially the same thing.
The keyword values which are relative to the parent element are
baseline aligns the baseline of the element with the baseline of its parent element. If an element does not have a baseline, the bottom is used.
middle aligns the vertical midpoint of an item with the baseline of the parent plus half the x-height of the parent.
sub subscripts the element
super superscripts the element
text-top aligns the top of an element with the top of the font of its parent element
text-bottom aligns the bottom of an element with the top of the font of its parent element
The keyword values which are relative to the line on which an element appears are
top aligns the top of the element with the top of the tallest element on the line on which it appears
bottom aligns the bottom of the element with the baseline of the font of the line on which it appears.
Percentage Values
Specifying a vertical-align as a percentage value gives rise to a quite complicated situation. The baseline of the element is raised above the baseline of its parent element. By how much? By the percentage of the element's line-height.
For example, {vertical-align: 20%} with an element that has a line-height of 10pt, the baseline of the element will be raised 2 points above the baseline of its parent element.
You can lower the baseline of an element below the baseline of its parent by using negative percentage values.
If no vertical-align value is set, the vertical-align of an element is baseline.
vertical-align is not inherited.
Percentage values are good ways of controlling how images and other non text elements align with text.
text-indent enables you to control how the first line of an element is indented, or outdented.
text-indent can be specified using either percentage or length values. See our section on values for detailed descriptions on each.
You can control outdent by giving text-indent negative values, however, different browsers may handle negative values in different ways.
When a percentage value is used, the indent or outdent is that percentage of the width of the parent element.
If no value is specified for the text-indent property, no indent or outdent is applied, essentially the property is set to 0.
An element has the same indent as its parent element.
A line is not an element as such, it can vary as the width of a page (window) varies. The text-indent property affects only the first line of an element. To indent an entire paragraph, for example, you can
The margin property is to be recommended, as this is in fact what the property exists for
Note that not all elements can be given a text-indent property. Only block elements can have text indentation. For a discussion of block and other types of element, see advanced style sheet concepts.
text-align allows you to specify how block the contents an element should be aligned. text-align can only be applied to block elements. For more on block elements, see advanced style sheet concepts.
text-align can be one of
Browsers do not have to support the justify value, and generally treat justify as left. (For right to left languages such as Arabic, they may treat justify as right.)
There is no default value for the text-align property. It is the business of a browser to determine how text should be aligned where no alignment has been specified by a style sheet.
An element inherits the alignment of its parent element.
When an element has a text-align specified, it is the contents of the element that are affected by the alignment.
The alignment is relative to the width of the element, not to the whole page.
CSS2 introduced the direction property. direction specifies the base direction for text. In a number of writing systems text flows from right to left.
direction can be either rtl or ltr.
If no direction value is set, the default value is ltr.
An element inherits the direction of its parent element.
This is a specialist area of CSS2 that we don't really need to go into. If you are working with unicode, bidirectional fonts, you'll probably be aware of the issues involved. In short, this property aids in controlling the directionality of unicode text.
unicode-bidi can be one of
If no unicode-bidi value is set, the default value is normal.
An element does not inherit the unicode-bidi of its parent element.